<template>
    <div>
        <Modal
            :value="value"
            @input="handleInput"
            width="746"
            class="col-2"
            :closable="false"
        >
            <div slot="header">
                申报失败
                <Icon class="f-fr" type="ios-close" @click="closeModal"/>
            </div>
            <Table :columns="columns" :data="dataList"></Table>
            <div slot="footer">
                <Button type="default" v-if="grade === 'error'" @click="closeModal">取消</Button>
                <Button type="primary" v-if="grade === 'warn'" @click="continueHandle">继续申报</Button>
                <Button type="default" v-if="grade === 'warn'" @click="closeModal">取消申报</Button>
            </div>
        </Modal>
        <div v-if="declareSucShow">
            <declareSuccessModal
                v-model="declareSucShow"
                :declareSuccess="declareSucParams"
            />
        </div>
        <declareFailModal ref="declareFailModalRef"/>
    </div>
</template>

<script>
import { examineDeclareList } from '@/api/declare'
import qs from 'qs'

import declareSuccessModal from './declareSuccessModal'
import declareFailModal from './declareFailModal'

export default {
    name: 'DeclareFailure',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        declareFailure: {
            default: function () {
                return {
                    data: {},
                    obj: {}
                }
            },
            type: Object
        }
    },
    components: {
        declareSuccessModal,
        declareFailModal
    },
    data () {
        return {
            columns: [
                {
                    title: '内部编号',
                    key: 'relNo'
                },
                {
                    title: '表名',
                    key: 'className'
                },
                {
                    title: '字段名',
                    key: 'fieldName'
                },
                {
                    title: '错误原因',
                    key: 'message',
                    tooltip: true
                }
            ],
            dataList: [],
            grade: '',
            obj: {},
            declareSucShow: false,
            declareSucParams: {}

        }
    },
    created () {
        this.init(this.declareFailure.data, this.declareFailure.obj)
    },
    methods: {
        init (data, obj) {
            this.dataList = data.list.map(item => {
                const { relNo, className, fieldName, message } = item
                return {
                    relNo,
                    className,
                    message,
                    fieldName: fieldName !== 'null' && fieldName || ''
                }
            })
            this.grade = data.grade
            this.obj = obj
        },

        continueHandle () {
            this.obj.continueFlag = 'Y'
            examineDeclareList(qs.stringify(this.obj)).then(res => {
                if (res.data.code === '0000') {
                    const {
                        successNum,
                        failNum,
                        resultList
                    } = res.data.data
                    if (failNum === 0) {
                        this.$Modal.success({
                            title: `申报结果`,
                            width: '500px',
                            content: '发送成功！'
                        })
                    } else {
                        this.$Modal.error({
                            title: `${successNum}导入成功，${failNum}导入失败`,
                            width: '500px',
                            render (h) {
                                return h('Table', {
                                    style: {
                                        width: '100%'
                                    },
                                    props: {
                                        height: '200px',
                                        columns: [
                                            {
                                                title: '内部编号',
                                                key: 'retCode',
                                                width: 160,
                                                align: 'center'
                                            },
                                            {
                                                title: '错误信息',
                                                key: 'retMsg',
                                                align: 'center',
                                                tooltip: true
                                            }
                                        ],
                                        data: resultList || []
                                    }
                                })
                            }
                        })
                    }
                } else {
                    this.$Message.error(res.data.msg)
                }
                this.closeModal()
            })
        },

        closeModal () {
            this.handleInput(false)
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        openSuccessModal (msg) {
            this.declareSucShow = true
            this.declareSucParams = {
                sendAllText: msg
            }
        }
    }
}
</script>
